<template>
  <div class="pagination-table">
    <el-table
      class="table-content"
      :border="border"
      :data="showData"
      :align="align"
      :max-height="tableHeight"
    >
      <el-table-column v-if="isShowNumber" :label="$t('COMMON.Order')">
        <template v-slot="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(col, colIdx) of columns"
        :key="colIdx"
        v-bind="col"
      >
        <template v-if="['lang', 'module'].includes(col.prop)" v-slot="{ row }">
          <span v-show="col.prop === 'lang'">
            {{ row.lang | showLangName }}
          </span>
          <span v-show="col.prop === 'module'">
            {{ row.module | showLangModule }}
          </span>
        </template>
        <!-- <p v-else v-html /> -->
      </el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
      class="page-info"
      :background="paginationBackgroud"
      v-bind="pageInfo"
      :total="total"
      :layout="layout"
      @size-change="changePageInfo($event, 'pageSize')"
      @current-change="changePageInfo($event, 'currentPage')"
    />
  </div>
</template>

<script>
import langFilter from "@/filters/lang";

export default {
  name: "PaginationTable",
  filters: {
    ...langFilter,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    border: Boolean,
    paginationBackgroud: {
      type: Boolean,
      default: true,
    },
    paginationLayout: {
      type: Array,
      default() {
        return ["sizes", "prev", "pager", "next", "total", "jumper"];
      },
    },
    align: {
      type: String,
      default: "left",
      validator(val) {
        return ["left", "center", "right"].includes(val);
      },
    },
    tableHeight: {
      type: Number,
      default: 500,
    },
    isShowNumber: Boolean,
  },
  data() {
    return {
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    /** 页长 */
    total() {
      return this.data.length;
    },
    /** 当前显示的data */
    showData() {
      const { currentPage, pageSize } = this.pageInfo,
        end = currentPage * pageSize,
        start = currentPage * pageSize - pageSize;

      const showData = this.data.slice(start, end);

      return showData;
    },
    /** 分页器工具栏 */
    layout() {
      return this.paginationLayout.filter((l) => l.length > 0).join(",");
    },
  },
  methods: {
    changePageInfo(value = 0, pageProperty = "") {
      this.$set(this.pageInfo, pageProperty, value);
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
